<template>
    <div class="oldversion">
        <Header :title="isEdit ? '编辑工作经历' : '添加工作经历'"></Header>
        <div class="topheader page">
            <div :class="'itembox ' + (item.title == '在职时间' ? '' : ' disFlex')" v-for="(item, index) in itemList"
                :key="index" @click="topage(item)">
                <div class="leftItem" v-if="item.title != '在职时间'">
                    <label for="" class="fontBlack2 font36 textL">{{ item.title }}</label>
                    <label for="" class=" font40 fontGrayB9 textL" v-if="!item.data">{{ item.placeholder }}</label>
                    <label for="" class="fontBlack2 font40 textL wrap" v-else
                        :class="(item.title == '工作内容' ? ' worktips' : '')">{{
                                item.data
                        }}</label>
                </div>
                <img :src="require('@/assets/images/chevron-right.png')" class="old_rightIcon1" v-if="item.title != '在职时间'">
                <div class="textL leftItem2" v-else>
                    <label for="" class="fontBlack2 font36 textL">{{ item.title }}</label>
                    <div class="disFlex2">
                        <label for="" class="font40 fontGrayB9 textL flex4" v-if="!item.data"
                            @click.stop="timeshow = true">{{ item.placeholder
                            }}</label>
                        <label for="" class="fontBlack2 font40 textL flex4" v-else @click.stop="timeshow = true">{{
                                item.data
                        }}</label>
                        <label for="" class="font40 fontBlack2 flex1 textC">-</label>
                        <label for="" class=" font40 textL flex4 "
                            :class="(endtime == '离职时间' ? ' fontGrayB9' : ' fontBlack2')"
                            @click.stop="timeshow1 = true">{{ endtime ? endtime : '至今' }}</label>

                    </div>
                </div>
            </div>
            <div class="blockbox"></div>
            <div class="bottom_submitBtn" v-if="!isEdit">
                <div @click="submit" class="font44 bgBlueFC fontWhite">保存</div>
            </div>
            <div class="old_bottom_submitBtn_two disFlex" v-else>
                <div @click="del" class="font44 bgGrayec fontBlack73">删除</div>
                <div @click="submit" class="font44 bgBlueFC fontWhite">保存</div>
            </div>
        </div>

        <picker-popup :columns="column" :show="show" @change="isConfirm" :type="page"></picker-popup>
        <dialog-btn :title="'是否确认删除'" :show="delshow" :isold="true"></dialog-btn>
        <van-popup v-model:show="timeshow" position="bottom" :style="{ 'border-radius': '0.16rem 0.16rem 0 0', }"
            :close-on-click-overlay="false">
            <van-datetime-picker v-model="currentDate" type="year-month" :formatter="formatter" @confirm="onConfirmTime"
                @cancel="onCancelTime" :min-date="minDate" :max-date="maxDate">

            </van-datetime-picker>
        </van-popup>
        <van-popup v-model:show="timeshow1" position="bottom" :style="{ 'border-radius': '0.16rem 0.16rem 0 0', }"
            :close-on-click-overlay="false">
            <van-datetime-picker v-model="currentDate" type="year-month" :formatter="formatter"
                @confirm="onConfirmTime1" @cancel="onCancelTime" :min-date="minDate" :max-date="maxDate">

            </van-datetime-picker>
        </van-popup>
        <dialog-btn :title="'是否保存当前页面'" :show="exitshow" :isold="true"></dialog-btn>

    </div>
</template>

<script>
import Header from '@/components/oldheader.vue';
import PickerPopup from '@/components/pickerpopup.vue';
import DialogBtn from '@/components/dialogbtn.vue';
import { getCurrentInstance, reactive } from 'vue'
import { Toast } from 'vant';
export default {
    components: {
        Header,
        PickerPopup,
        DialogBtn
    },
    data() {
        return {
            itemList: [
                { title: '公司名称', data: '', placeholder: '请输入', page: 'companyName' },
                { title: '所在行业', data: '', placeholder: '请选择', page: 'industry' },
                { title: '在职时间', data: '', placeholder: '入职时间', page: 'existtime' },
                { title: '岗位名称', data: '', placeholder: '请选择', page: 'jobs' },
                { title: '工作内容', data: '', placeholder: '请输入', page: 'workContents' },
            ],
            isEdit: false,
            show: false,
            page: '',
            column: [],
            delshow: false,
            timeshow: false,
            timeshow1: false,
            currentDate: new Date(),
            maxDate: new Date(),
            minDate: new Date(1940, 0, 1),
            endtime: '',
            token: this.$store.state.token,
            paramid: this.$route.params.id,//编辑参数
            data: {},
            workInfo: {},
            exitshow: false,
            idcard: this.$store.state.idCard
        }
    },
    mounted() {
        this.getinitInfo();
    },
    methods: {
        getinitInfo() {
            this.api = getCurrentInstance().appContext.config.globalProperties.$http;
            var that = this;
            var workInfo = this.$store.state.workInfo;
            var paramid = this.$store.state.id; //是否为编辑
            that.api.get('/personnel/h5/resumeInfo/queryOne', { identityNumber: that.idcard }).then(res => {
                var data = res.data;
                if (workInfo.companyName || workInfo.startTime || workInfo.endTime || workInfo.workContents || workInfo.profession || workInfo.industry) {
                    that.workInfo = workInfo;
                    if (paramid) {
                        that.isEdit = true;
                    }
                } else {
                    if (data.resumeWorkRst) {
                        var data1 = data.resumeWorkRst;
                        if (data1.id && data1.version + '') {
                            var myget = {
                                id: data1.id,
                                version: data1.version,
                                identityNumber: data1.identityNumber
                            };
                            that.$store.commit('setmyget', myget);
                        }
                        if (that.paramid) {
                            for (let i = 0; i < data1.workInfoList.length; i++) {
                                if (data1.workInfoList[i].id == that.paramid) {
                                    that.$store.commit('setworkInfo', data1.workInfoList[i]);
                                    that.$store.commit('setid', that.paramid);
                                    that.isEdit = true;
                                    that.workInfo = data1.workInfoList[i]
                                }
                            }

                        }
                        if (data1.workInfoList.length > 0) {
                            that.$store.commit('setworkList', data1.workInfoList);
                        }
                    }
                }
                that.getMyinfo(that.workInfo);
            });
        },
        getMyinfo(data) {
            var that = this;
            that.itemList[0].data = data.companyName;
            if (data.profession) {
                that.getindustry(); //获取行业下拉框
            }
            that.itemList[2].data = data.startTime ? data.startTime.slice(0, 7) : '';
            that.endtime = data.endTime ? data.endTime.slice(0, 7) : '至今';
            that.itemList[4].data = data.workContents;
            if (data.industry) {
                that.getpostdict(); // 查询岗位下拉树
            }
        },
        topage(e) {
            if (e.page == 'companyName') {
                this.$router.push({ name: 'oldwork', params: { page: e.title } });
            } else if (e.page == 'workContents') {
                this.$router.push({ name: 'oldwork1' });
            }
            /* else if (e.page == 'existtime') {
                this.timeshow = true;
            } */ else if (e.page == 'jobs') {
                this.$router.push('/oldexpost')
            } else if (e.page == 'industry') {
                this.$router.push('/oldextrade')
            }

        },
        isClose() {
            this.show = false;
        },
        ispopClose() {
            this.delshow = false;
            if (this.exitshow) {
                this.exitshow = false;
                this.$store.commit('setworkInfo', {});
                this.$store.commit('setid', '');
                this.$store.commit('setmyget', {});
                this.$store.commit('setworkList', []);
                this.$router.replace('/oldresume')
            }
        },
        isConfirm(value, index, type) {
            for (let i of this.itemList) {
                if (i.page == type) {
                    if (value instanceof Array) {
                        if (value[1] < value[0]) {
                            Toast('时间选择错误')
                            return
                        }
                        i.data = value[0] + '-' + value[1];
                    } else {
                        i.data = value;
                    }
                }
            }
            this.show = false;
        },
        submit() {
            if (!this.itemList[0].data) {
                Toast('请输入公司名称');
                return;
            } else if (!this.itemList[1].data) {
                Toast('请选择所在行业');
                return;
            } else if (!this.itemList[2].data) {
                Toast('请选择入职时间 ');
                return;
            } else if (!this.itemList[3].data) {
                Toast('请选择岗位名称');
                return;
            } else if (!this.itemList[4].data) {
                Toast('请输入工作内容');
                return;
            }
            var data = this.$store.state.myget;
            data.identityNumber = this.token;
            var list = this.$store.state.workList;
            if (this.$store.state.id) {
                for (let i = 0; i < list.length; i++) {
                    if (this.$store.state.id == list[i].id) {
                        list[i] = this.workInfo;
                        list[i].resumeId = data.id;
                        list[i].startTime = list[i].startTime.length == 10 ? list[i].startTime : list[i].startTime + '-01';
                        list[i].endTime = list[i].endTime ? (list[i].endTime.length == 10 ? list[i].endTime : list[i].endTime + '-01') : '';
                    }
                }
            } else {
                // list = [];
                var obj = Object.assign({}, this.workInfo);
                obj.resumeId = data.id;
                obj.startTime = obj.startTime.length == 10 ? obj.startTime : obj.startTime + '-01';
                obj.endTime = obj.endTime ? (obj.endTime.length == 10 ? obj.endTime : obj.endTime + '-01') : '';
                list.push(obj);
            }
            data.workInfoList = list;

            var that = this;
            this.api.post('/personnel/h5/resumeInfo/addOrEditWork', data).then(res => {
                if (res.code == 200) {
                    that.$store.commit('setworkInfo', {});
                    that.$store.commit('setid', '');
                    that.$store.commit('setmyget', {});
                    that.$store.commit('setworkList', []);
                    that.$router.replace('/oldresume')
                }
            })
        },
        del() {
            this.delshow = true;
        },
        ispopSub() {
            if (this.delshow) {
                this.delshow = false;
                this.itemList[0].data = ''
                this.itemList[1].data = ''
                this.itemList[2].data = ''
                this.itemList[3].data = ''
                this.itemList[4].data = ''
                this.endtime = '至今'
                let that = this;
                this.api.get('/personnel/h5/resumeInfo/deleteWork', { id: this.$store.state.id }).then(res => {
                    if (res.code == 200) {
                        that.$store.commit('setworkInfo', {});
                        that.$store.commit('setid', '');
                        that.$store.commit('setmyget', {});
                        that.$store.commit('setworkList', []);
                        that.$router.replace('/oldresume')
                    }

                })
                return
            }
            if (this.exitshow) {
                this.exitshow = false;
                this.submit();
                return;
            }
        },
        onConfirmTime(e) {
            let time = e.getFullYear() + '-' + ((e.getMonth() + 1) < 10 ? '0' + (e.getMonth() + 1) : (e.getMonth() + 1));
            this.itemList[2].data = time;
            this.timeshow = false;
            this.workInfo.startTime = time;
            this.$store.commit('setworkInfo', this.workInfo);

        },
        onConfirmTime1(e) {
            let time = e.getFullYear() + '-' + ((e.getMonth() + 1) < 10 ? '0' + (e.getMonth() + 1) : (e.getMonth() + 1));
            this.endtime = time;
            this.timeshow1 = false;
            this.workInfo.endTime = time;
            this.$store.commit('setworkInfo', this.workInfo);
        },
        onCancelTime() {
            this.timeshow = false;
            this.timeshow1 = false;
        },
        goback() {
            if (JSON.stringify(this.workInfo) != '{}') {
                this.exitshow = true;
            } else {
                this.$store.commit('setworkInfo', {});
                this.$store.commit('setid', '');
                this.$store.commit('setmyget', {});
                this.$store.commit('setworkList', []);
                this.$router.replace('/oldresume')
            }
        },
        // 获取行业下拉框
        getindustry() {
            var that = this;
            that.api.get('/personnel/h5/resumeInfo/getIndustryTree', {}).then(res => {
                var data = res.data;
                var profession = that.workInfo.profession.split(' ');
                var arr = [];
                data.forEach(el => {
                    el.children.forEach(val => {
                        profession.forEach(t => {
                            if (val.code == t) {
                                arr.push(val.chName);
                            }
                        })
                    })
                });
                that.itemList[1].data = arr.join(' ')
            })
        },
        // 获取岗位下拉树
        getpostdict() {
            var that = this;
            that.api.get('/personnel/h5/resumeInfo/getPostDictTree', {}).then(res => {
                var data1 = res.data;
                var industry = that.workInfo.industry;
                var arr = ''
                data1.forEach(el => {
                    el.children.forEach(el2 => {
                        el2.children.forEach(val => {
                            if (val.code == industry) {
                                arr = val.chName
                            }
                        })
                    })
                });
                that.itemList[3].data = arr
            })
        },
    }
}
</script>

<style scoped>
.itembox {
    border-bottom: 0.02rem solid #E8E9EC;
    height: 1.66rem;
}

.leftItem {
    display: flex;
    flex-direction: column;
}

.leftItem label:nth-child(1) {
    margin-bottom: 0.1rem;
}

.blockbox {
    height: 1.6rem;
}

.disFlex2 {
    display: flex;
    align-items: center;
    margin-top: 0.1rem;
}

.leftItem2 {
    padding-top: 0.24rem;
}

.worktips {
    display: -webkit-box;
    /*控制显示行数*/
    -webkit-line-clamp: 2;
    /* 可以显示的行数，超出部分用...表示*/
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>